<template>
    <div>
        <div class="banner-wrap">
            <div class="swiper-container" ref="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in images" :key="index"><img :src="item.image" :alt="item.title"></div>
                </div>
                <div class="swiper-pagination" ref="swiper-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>
  import Swiper from '../../assets/js/libs/swiper/swiper.js';
  import { request } from '../../assets/js/utils/request';

  export default {
    name: 'swiper',
    data() {
      return {
        images: []
      };
    },
    created() {
      request(this.$config.baseApi + '/home/index/slide?token=' + this.$config.token)
        .then(res => {
          if(res.code==200){
            this.images=res.data;
            this.$nextTick(()=>{
              new Swiper(this.$refs['swiper-container'], {
                autoplay: 3000,//可选选项，自动滑动
                pagination: this.$refs['swiper-pagination'],
                paginationClickable: true,
                autoplayDisableOnInteraction: false
              });
            })
          }
        });
    },
    mounted() {

    }
  };
</script>

<style scoped>
    @import "../../assets/js/libs/swiper/swiper.css";

    .banner-wrap {
        width: 100%;
        height: 200px;
    }

    .swiper-container, .swiper-container img {
        width: 100%;
        height: 100%
    }
</style>
